<template>
	<el-form :model="ruleForm" :rules="rules" label-width="100px">
		<el-form-item label="标题" prop="title">
			<el-input v-model="ruleForm.title"></el-input>
		</el-form-item>
		<el-form-item label="返回按钮" prop="isBack">
			<el-switch v-model="ruleForm.isBack"></el-switch>
		</el-form-item>
	</el-form>
</template>

<script lang="javascript">
	import { reactive, toRefs, watch } from 'vue';
	import { updatePropsShopDecoration } from './propsHooks';
	export default {
		props : {
			defaultProps : Object
		},
		setup (props) {
			let state = reactive({
				ruleForm : {
					title : props.defaultProps.title,
					isBack : props.defaultProps.isBack
				},
				rules : {
					title : [{ required : true, message : '请输入标题', trigger : 'blur' }]
				}
			});
			let updateProps = updatePropsShopDecoration();
			watch(state.ruleForm, () => {
				updateProps(state.ruleForm);
			});

			return {
				...toRefs(state)
			};
		}
	};
</script>

<style lang="scss" scoped></style>
